import React from 'react'
import { NavLink, Outlet, useLocation, useNavigate, useMatch, useRoutes } from 'react-router-dom';
import { Tab, TabItem } from './HomeLayout.style';
import { connect } from 'react-redux';
import { changeIndex } from "./store/actionCreators"

const Home = (props) => {
    // console.log(props, '//.///')
    // console.log(useMatch('/home'), '????'); //可能是这个api

    // let navigate = useNavigate();
    // console.log(navigate);

    // console.log("打印路由组件的props:", props)
    // console.log(useLocation());
    // const { pathname } = useLocation();
    // console.log(pathname, "-----------", navigate)
    const { index } = props;
    // 状态

    //  业务函数
    const { changeIndexDispatch } = props
    // console.log(changeIndexDispatch)


    return (
        <>
            {/* <button onClick={() => changeIndexDispatch(2)}>点我改变store</button> */}
            <Tab>
                <NavLink to="/find" className={({ isActive }) => isActive ? "selected" : null} onClick={() => changeIndexDispatch(1)}>
                    <TabItem >
                        {
                            index == 1
                                ? <svg t="1641568053673" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11389" width="200" height="200"><path d="M512 85.333333c235.637333 0 426.666667 191.029333 426.666667 426.666667S747.637333 938.666667 512 938.666667 85.333333 747.637333 85.333333 512 276.362667 85.333333 512 85.333333z m0 64c-200.298667 0-362.666667 162.368-362.666667 362.666667s162.368 362.666667 362.666667 362.666667 362.666667-162.368 362.666667-362.666667-162.368-362.666667-362.666667-362.666667z m149.162667 158.901334a42.666667 42.666667 0 0 1 54.602666 54.602666L637.642667 579.84a96 96 0 0 1-57.813334 57.802667l-216.992 78.122666a42.666667 42.666667 0 0 1-54.602666-54.602666l78.122666-217.002667a96 96 0 0 1 57.813334-57.802667z m-20.970667 75.573333l-174.346667 62.762667a32 32 0 0 0-19.274666 19.274666l-62.762667 174.346667 174.346667-62.762667a32 32 0 0 0 19.274666-19.274666l62.762667-174.346667z" p-id="11390" fill="#1296db"></path></svg>
                                : <svg t="1641568053673" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11389" width="200" height="200"><path d="M512 85.333333c235.637333 0 426.666667 191.029333 426.666667 426.666667S747.637333 938.666667 512 938.666667 85.333333 747.637333 85.333333 512 276.362667 85.333333 512 85.333333z m0 64c-200.298667 0-362.666667 162.368-362.666667 362.666667s162.368 362.666667 362.666667 362.666667 362.666667-162.368 362.666667-362.666667-162.368-362.666667-362.666667-362.666667z m149.162667 158.901334a42.666667 42.666667 0 0 1 54.602666 54.602666L637.642667 579.84a96 96 0 0 1-57.813334 57.802667l-216.992 78.122666a42.666667 42.666667 0 0 1-54.602666-54.602666l78.122666-217.002667a96 96 0 0 1 57.813334-57.802667z m-20.970667 75.573333l-174.346667 62.762667a32 32 0 0 0-19.274666 19.274666l-62.762667 174.346667 174.346667-62.762667a32 32 0 0 0 19.274666-19.274666l62.762667-174.346667z" p-id="11390" fill="#bfbfbf"></path></svg>
                        }
                        <span>发现</span>
                    </TabItem>
                </NavLink>
                <NavLink to="/try" className={({ isActive }) => isActive ? "selected" : null} onClick={() => changeIndexDispatch(2)}>
                    <TabItem >
                        {
                            index == 2
                                ? <svg t="1641568156927" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13094" width="200" height="200"><path d="M511.999488 1023.520069c282.518468 0 511.523139-229.003648 511.523139-511.524163 0-282.514375-229.004671-511.518023-511.523139-511.518023-282.520515 0-511.523139 229.003648-511.523139 511.518023C0.476349 794.516422 229.478973 1023.520069 511.999488 1023.520069zM942.930101 589.717036c-16.356526 91.784426-59.631122 173.844374-121.117498 237.19112-58.8442 60.647265-134.382617 104.10094-218.8678 122.499985 4.237511-43.818995 9.335622-104.541985 17.362436-156.401096 22.070668-142.7901 66.686818-204.836225 191.425797-229.057883 35.012422-6.80601 71.749114-6.969739 108.470457-6.149047C938.418344 557.199435 948.825368 564.821019 942.930101 589.717036zM96.153432 365.006158c21.745257-67.305919 58.428737-127.573537 106.029872-176.592974 79.903841-82.381266 194.868199-123.55706 309.833581-123.55706 114.926496 0 229.876528 41.175795 309.793672 123.55706 47.605228 49.019437 84.288708 109.287055 106.014522 176.592974 6.02625 22.604834-2.000564 33.266661-23.980157 32.045857-72.117504-2.860141-227.513714-5.135974-259.416308-6.78759 27.389814 32.022321 44.020586 74.111928 44.020586 120.151497 0 50.205449-19.744693 95.675036-51.676963 128.574331-11.413957 11.755742-24.345478 21.89159-38.522362 30.083156-26.677593 15.44783-56.466036 23.163559-86.234013 23.178909-29.80584-0.016373-59.59326-7.732102-86.269829-23.178909-14.156418-8.192589-27.131941-18.327414-38.523385-30.083156-31.934317-32.898271-51.676963-78.368882-51.676963-128.574331 0-46.039569 16.614399-88.129176 44.031842-120.151497-31.912827 1.651616-187.309036 3.927449-259.424494 6.78759C98.156042 398.272819 90.168114 387.610992 96.153432 365.006158zM103.777063 557.800116c36.72339-0.820692 73.462129-0.657986 108.472504 6.149047 124.753305 24.221658 169.373549 86.267782 191.446263 229.057883 8.004301 51.859112 13.116739 112.582101 17.358343 156.401096-84.504626-18.380626-160.021553-61.85272-218.885196-122.499985-61.467957-63.345724-104.740506-145.405671-121.100102-237.19112C75.173608 564.821019 85.565283 557.199435 103.777063 557.800116z" p-id="13095" fill="#1296db"></path><path d="M412.975171 612.639095c9.769504 10.067286 20.944008 18.621103 33.245172 25.385157 40.812521 22.400173 90.744747 22.400173 131.558291 0 12.281721-6.763031 23.489994-15.33629 33.227776-25.385157 25.347295-26.111704 41.014112-62.194504 41.014112-102.042047 0-39.832194-15.667841-75.914994-41.014112-102.011348-51.097772-52.639894-146.953933-52.639894-198.031239 0-25.330922 26.096355-40.99774 62.179155-40.99774 102.011348C371.976408 550.444591 387.644249 586.528414 412.975171 612.639095zM490.073106 455.355909c13.921058-5.897314 29.913287-5.897314 43.855834 0 21.011546 8.892531 35.82595 30.206976 35.82595 55.061037 0 23.472598-13.195533 43.777039-32.334429 53.462632-15.848966 8.022721-34.974559 8.022721-50.839899 0-19.165502-9.685593-32.338522-29.990035-32.338522-53.462632C454.243063 485.562884 469.05542 464.24844 490.073106 455.355909z" p-id="13096" fill="#1296db"></path></svg>
                                : <svg t="1641568156927" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13094" width="200" height="200"><path d="M511.999488 1023.520069c282.518468 0 511.523139-229.003648 511.523139-511.524163 0-282.514375-229.004671-511.518023-511.523139-511.518023-282.520515 0-511.523139 229.003648-511.523139 511.518023C0.476349 794.516422 229.478973 1023.520069 511.999488 1023.520069zM942.930101 589.717036c-16.356526 91.784426-59.631122 173.844374-121.117498 237.19112-58.8442 60.647265-134.382617 104.10094-218.8678 122.499985 4.237511-43.818995 9.335622-104.541985 17.362436-156.401096 22.070668-142.7901 66.686818-204.836225 191.425797-229.057883 35.012422-6.80601 71.749114-6.969739 108.470457-6.149047C938.418344 557.199435 948.825368 564.821019 942.930101 589.717036zM96.153432 365.006158c21.745257-67.305919 58.428737-127.573537 106.029872-176.592974 79.903841-82.381266 194.868199-123.55706 309.833581-123.55706 114.926496 0 229.876528 41.175795 309.793672 123.55706 47.605228 49.019437 84.288708 109.287055 106.014522 176.592974 6.02625 22.604834-2.000564 33.266661-23.980157 32.045857-72.117504-2.860141-227.513714-5.135974-259.416308-6.78759 27.389814 32.022321 44.020586 74.111928 44.020586 120.151497 0 50.205449-19.744693 95.675036-51.676963 128.574331-11.413957 11.755742-24.345478 21.89159-38.522362 30.083156-26.677593 15.44783-56.466036 23.163559-86.234013 23.178909-29.80584-0.016373-59.59326-7.732102-86.269829-23.178909-14.156418-8.192589-27.131941-18.327414-38.523385-30.083156-31.934317-32.898271-51.676963-78.368882-51.676963-128.574331 0-46.039569 16.614399-88.129176 44.031842-120.151497-31.912827 1.651616-187.309036 3.927449-259.424494 6.78759C98.156042 398.272819 90.168114 387.610992 96.153432 365.006158zM103.777063 557.800116c36.72339-0.820692 73.462129-0.657986 108.472504 6.149047 124.753305 24.221658 169.373549 86.267782 191.446263 229.057883 8.004301 51.859112 13.116739 112.582101 17.358343 156.401096-84.504626-18.380626-160.021553-61.85272-218.885196-122.499985-61.467957-63.345724-104.740506-145.405671-121.100102-237.19112C75.173608 564.821019 85.565283 557.199435 103.777063 557.800116z" p-id="13095" fill="#bfbfbf"></path><path d="M412.975171 612.639095c9.769504 10.067286 20.944008 18.621103 33.245172 25.385157 40.812521 22.400173 90.744747 22.400173 131.558291 0 12.281721-6.763031 23.489994-15.33629 33.227776-25.385157 25.347295-26.111704 41.014112-62.194504 41.014112-102.042047 0-39.832194-15.667841-75.914994-41.014112-102.011348-51.097772-52.639894-146.953933-52.639894-198.031239 0-25.330922 26.096355-40.99774 62.179155-40.99774 102.011348C371.976408 550.444591 387.644249 586.528414 412.975171 612.639095zM490.073106 455.355909c13.921058-5.897314 29.913287-5.897314 43.855834 0 21.011546 8.892531 35.82595 30.206976 35.82595 55.061037 0 23.472598-13.195533 43.777039-32.334429 53.462632-15.848966 8.022721-34.974559 8.022721-50.839899 0-19.165502-9.685593-32.338522-29.990035-32.338522-53.462632C454.243063 485.562884 469.05542 464.24844 490.073106 455.355909z" p-id="13096" fill="#bfbfbf"></path></svg>
                        }
                        <span>试驾</span>
                    </TabItem>
                </NavLink>
                <NavLink to="/buycar" className={({ isActive }) => isActive ? "selected" : null}>
                    <TabItem onClick={() => changeIndexDispatch(3)}>
                        {
                            index == 3
                                ? <svg t="1641568224533" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14181" width="200" height="200"><path d="M912.832 467.104h-22.272l-6.624-22.464h60.928a32 32 0 1 0 0-64h-79.808l-35.584-120.544C815.168 221.28 771.52 192 728 192H302.592c-43.52 0-87.136 29.28-102.112 70.112l-34.944 118.528H96a32 32 0 0 0 0 64h50.624l-6.624 22.464H128c-35.296 0-64 28.704-64 64v282.944h51.104v34.816a32 32 0 1 0 64 0v-34.816h690.528v34.816a32 32 0 1 0 64 0v-34.816h43.232v-282.944a64.128 64.128 0 0 0-64.032-64zM128 750.016v-104.96h73.792c26.464 0 50.528-16.672 59.872-41.408l24.064-63.712c1.088-2.912 1.216-5.888 1.44-8.832h450.528c0.224 2.944 0.352 5.92 1.44 8.832l24.064 63.648a64.256 64.256 0 0 0 59.872 41.472h89.76v104.96H128z m784.832-168.96l-89.76-0.032-18.848-49.952h108.608v49.984zM218.528 426.944a30.944 30.944 0 0 0 2.816-9.568L261.184 282.24c4.48-12.16 23.52-26.24 41.408-26.24H728c17.888 0 36.928 14.08 40.736 24.192l55.104 186.88H206.72l11.808-40.128z m2.144 104.16l-18.88 49.984H128v-49.984h92.672z" p-id="14182" fill="#1296db"></path><path d="M614.752 626.24h-188.64a32 32 0 1 0 0 64h188.64a32 32 0 1 0 0-64z" p-id="14183" fill="#1296db"></path></svg>
                                : <svg t="1641568224533" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14181" width="200" height="200"><path d="M912.832 467.104h-22.272l-6.624-22.464h60.928a32 32 0 1 0 0-64h-79.808l-35.584-120.544C815.168 221.28 771.52 192 728 192H302.592c-43.52 0-87.136 29.28-102.112 70.112l-34.944 118.528H96a32 32 0 0 0 0 64h50.624l-6.624 22.464H128c-35.296 0-64 28.704-64 64v282.944h51.104v34.816a32 32 0 1 0 64 0v-34.816h690.528v34.816a32 32 0 1 0 64 0v-34.816h43.232v-282.944a64.128 64.128 0 0 0-64.032-64zM128 750.016v-104.96h73.792c26.464 0 50.528-16.672 59.872-41.408l24.064-63.712c1.088-2.912 1.216-5.888 1.44-8.832h450.528c0.224 2.944 0.352 5.92 1.44 8.832l24.064 63.648a64.256 64.256 0 0 0 59.872 41.472h89.76v104.96H128z m784.832-168.96l-89.76-0.032-18.848-49.952h108.608v49.984zM218.528 426.944a30.944 30.944 0 0 0 2.816-9.568L261.184 282.24c4.48-12.16 23.52-26.24 41.408-26.24H728c17.888 0 36.928 14.08 40.736 24.192l55.104 186.88H206.72l11.808-40.128z m2.144 104.16l-18.88 49.984H128v-49.984h92.672z" p-id="14182" fill="#bfbfbf"></path><path d="M614.752 626.24h-188.64a32 32 0 1 0 0 64h188.64a32 32 0 1 0 0-64z" p-id="14183" fill="#bfbfbf"></path></svg>
                        }
                        <span>购车</span>
                    </TabItem>
                </NavLink>
                <NavLink to="/home" className={({ isActive }) => isActive ? "selected" : null}>
                    <TabItem onClick={() => changeIndexDispatch(4)}>
                        {
                            index == 4
                                ? <svg t="1641568278852" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15354" width="200" height="200"><path d="M976.666667 921.386667l-77.333334-618.666667a53.42 53.42 0 0 0-52.913333-46.72H725.333333v-64A149.48 149.48 0 0 0 511.94 57.02 149.333333 149.333333 0 0 0 298.666667 192v64H177.58A53.413333 53.413333 0 0 0 124.666667 302.72l-77.333334 618.666667a53.333333 53.333333 0 0 0 52.913334 59.946666h823.506666a53.333333 53.333333 0 0 0 52.92-59.946666zM682.666667 192v64H469.333333v-64c0-58.813333 47.853333-106.666667 106.666667-106.666667s106.666667 47.853333 106.666667 106.666667zM448 85.333333a107.333333 107.333333 0 0 1 21.333333 2.153334A148.346667 148.346667 0 0 0 426.666667 192v64H341.333333v-64c0-58.813333 47.853333-106.666667 106.666667-106.666667zM92.253333 935.06a10.54 10.54 0 0 1-2.586666-8.393333l77.333333-618.666667a10.666667 10.666667 0 0 1 10.58-9.333333H253.333333c-0.273333 1.333333-0.506667 2.666667-0.666666 4.053333l-77.333334 618.666667a53.206667 53.206667 0 0 0 0.666667 17.28H100.246667a10.546667 10.546667 0 0 1-7.993334-3.606667z m839.493334 0a10.546667 10.546667 0 0 1-8 3.606667H228.246667a10.666667 10.666667 0 0 1-10.58-12l77.333333-618.666667a10.666667 10.666667 0 0 1 10.58-9.333333H426.666667v91.073333a42.666667 42.666667 0 1 0 42.666666 0V298.666667h213.333334v91.073333a42.666667 42.666667 0 1 0 42.666666 0V298.666667h121.086667a10.666667 10.666667 0 0 1 10.58 9.333333l77.333333 618.666667a10.54 10.54 0 0 1-2.586666 8.393333z" fill="#1296db" p-id="15355"></path></svg>
                                : <svg t="1641568278852" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15354" width="200" height="200"><path d="M976.666667 921.386667l-77.333334-618.666667a53.42 53.42 0 0 0-52.913333-46.72H725.333333v-64A149.48 149.48 0 0 0 511.94 57.02 149.333333 149.333333 0 0 0 298.666667 192v64H177.58A53.413333 53.413333 0 0 0 124.666667 302.72l-77.333334 618.666667a53.333333 53.333333 0 0 0 52.913334 59.946666h823.506666a53.333333 53.333333 0 0 0 52.92-59.946666zM682.666667 192v64H469.333333v-64c0-58.813333 47.853333-106.666667 106.666667-106.666667s106.666667 47.853333 106.666667 106.666667zM448 85.333333a107.333333 107.333333 0 0 1 21.333333 2.153334A148.346667 148.346667 0 0 0 426.666667 192v64H341.333333v-64c0-58.813333 47.853333-106.666667 106.666667-106.666667zM92.253333 935.06a10.54 10.54 0 0 1-2.586666-8.393333l77.333333-618.666667a10.666667 10.666667 0 0 1 10.58-9.333333H253.333333c-0.273333 1.333333-0.506667 2.666667-0.666666 4.053333l-77.333334 618.666667a53.206667 53.206667 0 0 0 0.666667 17.28H100.246667a10.546667 10.546667 0 0 1-7.993334-3.606667z m839.493334 0a10.546667 10.546667 0 0 1-8 3.606667H228.246667a10.666667 10.666667 0 0 1-10.58-12l77.333333-618.666667a10.666667 10.666667 0 0 1 10.58-9.333333H426.666667v91.073333a42.666667 42.666667 0 1 0 42.666666 0V298.666667h213.333334v91.073333a42.666667 42.666667 0 1 0 42.666666 0V298.666667h121.086667a10.666667 10.666667 0 0 1 10.58 9.333333l77.333333 618.666667a10.54 10.54 0 0 1-2.586666 8.393333z" fill="#8a8a8a" p-id="15355"></path></svg>

                        }
                        <span>潮物</span>
                    </TabItem>
                </NavLink>
                <NavLink to="/my" className={({ isActive }) => isActive ? "selected" : null}>
                    <TabItem onClick={() => changeIndexDispatch(5)}>
                        {
                            index == 5
                                ? <svg t="1641568355241" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16446" width="200" height="200"><path d="M885.333333 96c23.786667 0 39.253333 25.034667 28.618667 46.314667a7024.8 7024.8 0 0 0-56.917333 116.234666A424.853333 424.853333 0 0 1 938.666667 509.589333c0 235.637333-191.029333 426.666667-426.666667 426.666667s-426.666667-191.029333-426.666667-426.666667c0-235.648 191.029333-426.666667 426.666667-426.666666a424.938667 424.938667 0 0 1 196.544 47.872C762.453333 107.573333 821.482667 96 885.333333 96z m-164.234666 99.381333a32 32 0 0 1-29.696-1.066666A360.821333 360.821333 0 0 0 512 146.933333c-200.298667 0-362.666667 162.368-362.666667 362.666667 0 200.288 162.368 362.666667 362.666667 362.666667s362.666667-162.378667 362.666667-362.666667a360.96 360.96 0 0 0-79.850667-227.061333 32 32 0 0 1-4-33.706667 5870.922667 5870.922667 0 0 1 41.322667-85.589333c-39.786667 4.970667-76.768 15.701333-111.04 32.149333zM330.666667 362.666667a42.666667 42.666667 0 0 1 42.666666 42.666666v64a42.666667 42.666667 0 1 1-85.333333 0v-64a42.666667 42.666667 0 0 1 42.666667-42.666666z m170.666666 0a42.666667 42.666667 0 0 1 42.666667 42.666666v64a42.666667 42.666667 0 1 1-85.333333 0v-64a42.666667 42.666667 0 0 1 42.666666-42.666666z" p-id="16447" fill="#1296db"></path></svg>
                                : <svg t="1641568355241" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16446" width="200" height="200"><path d="M885.333333 96c23.786667 0 39.253333 25.034667 28.618667 46.314667a7024.8 7024.8 0 0 0-56.917333 116.234666A424.853333 424.853333 0 0 1 938.666667 509.589333c0 235.637333-191.029333 426.666667-426.666667 426.666667s-426.666667-191.029333-426.666667-426.666667c0-235.648 191.029333-426.666667 426.666667-426.666666a424.938667 424.938667 0 0 1 196.544 47.872C762.453333 107.573333 821.482667 96 885.333333 96z m-164.234666 99.381333a32 32 0 0 1-29.696-1.066666A360.821333 360.821333 0 0 0 512 146.933333c-200.298667 0-362.666667 162.368-362.666667 362.666667 0 200.288 162.368 362.666667 362.666667 362.666667s362.666667-162.378667 362.666667-362.666667a360.96 360.96 0 0 0-79.850667-227.061333 32 32 0 0 1-4-33.706667 5870.922667 5870.922667 0 0 1 41.322667-85.589333c-39.786667 4.970667-76.768 15.701333-111.04 32.149333zM330.666667 362.666667a42.666667 42.666667 0 0 1 42.666666 42.666666v64a42.666667 42.666667 0 1 1-85.333333 0v-64a42.666667 42.666667 0 0 1 42.666667-42.666666z m170.666666 0a42.666667 42.666667 0 0 1 42.666667 42.666666v64a42.666667 42.666667 0 1 1-85.333333 0v-64a42.666667 42.666667 0 0 1 42.666666-42.666666z" p-id="16447" fill="#8a8a8a"></path></svg>
                        }
                        <span>我的</span>
                    </TabItem>
                </NavLink>
            </Tab>
            <Outlet />
        </>
    );
}
const mapStateToProps = (state) => {
    return {
        index: state.active.index
    }
}

const mapStateToDispatch = (dispatch) => {
    return {
        changeIndexDispatch(index) {
            dispatch(changeIndex(index))
        }
    }
}

export default connect(mapStateToProps, mapStateToDispatch)(React.memo(Home));
